import React, {useState, useEffect, forwardRef, useImperativeHandle} from 'react'
import { Form, Row, Col, Input, Tag, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { TweenOneGroup } from 'rc-tween-one';
import './room.less'
const Floor = (props: any, ref: any) => {
  var inputItem: any = ''
  const [rooms, setrooms] = useState<string[]>([]);
  const [form] = Form.useForm()
  const [isInputVisible, setisInputVisible] = useState<boolean>(false);
  const [inputValue, setinputValue] = useState<any>('');
  const [roomTypeLists, setroomTypeLists] = useState<any[]>([{name: '睿沃智慧酒店401', value: '睿沃智慧酒店401'},{name: '睿沃智慧酒店402', value: '睿沃智慧酒店402'},{name: '睿沃智慧酒店403', value: '睿沃智慧酒店403'}]);
  const allFloor = (
    <div>
      总层
    </div>
  )
  const allRoom = (
    <div>
      间/每层
    </div>
  )
  const getRooms = ()=>{
    const floorNums = Number(form.getFieldValue('floorNums'))
    const roomNums = Number(form.getFieldValue('roomNums'))
    let rooms = []
    for (let index = 1; index < floorNums+1; index++) {
      for(let i = 1; i < roomNums+1; i++) {
        rooms.push(`${index}${i > 9 ? i : '0' + i}`)
      }  
    }
    setrooms(rooms)
  }
  const showInput = ()=>{   
    setisInputVisible(true)
    // roomTypeLists.push(e.target.name)
  }
  const handleInputConfirm = (e: any)=>{
    if(inputValue) {

      setisInputVisible(false)
      setroomTypeLists([...roomTypeLists, {name: inputValue}])
    }
  }
  const handleInputChange = (e:any) =>{
    setinputValue(e.target.value)
  }
  const saveInputRef = (input: any) => {
    inputItem = input
  };
  useImperativeHandle(ref, ()=>{
    return form
  }, [form])        
  useEffect(() => {
    if(isInputVisible) {
      if (inputItem) {
        inputItem.focus();
      }
    } else {
      setinputValue('')
    }
}, [isInputVisible])  
  return (
    <div>
      <Form
        form={form}
        name="basic"
        initialValues={{ remember: true }}
      >   
        <Row>
          <Col span={8}><Form.Item name="floorNums" label="总楼层" rules={[{ required: true }]}><Input type='number' addonAfter={allFloor}/></Form.Item></Col>
          <Col offset={2} span={8}><Form.Item name="roomNums" label="房间数" rules={[{ required: true }]}><Input type='number'  addonAfter={allRoom}/></Form.Item></Col>
          <Col offset={2}><Button type='primary' onClick={getRooms}>生成房号</Button></Col>
          <Col span={24} className='roomPreview'><Form.Item label="房号预览" rules={[{ required: true }]}>{
            rooms.map(val=>{
            return <Tag key={val} className="site-tag-plus tagSelf" closable color='#2db7f5'>{val}房</Tag>
            })
          }</Form.Item></Col>
          <Col span={24}><Form.Item label="房型管理" rules={[{ required: true }]}>
            <TweenOneGroup>
              {
                roomTypeLists.map((val, i)=>{
                  return <Tag key={i} className="site-tag-plus tagSelf" closable color='#108ee9'>
                    {val.name}
                  </Tag>
                })
              }
              {
                isInputVisible ? <Input
                ref={saveInputRef}
                type="text"
                size="small"
                style={{ width: 78 }}
                value={inputValue}
                onChange={handleInputChange}
                onBlur={handleInputConfirm}
                onPressEnter={handleInputConfirm}
              /> : <Tag className="site-tag-plus tagSelf" onClick={showInput} color='#87d068'><PlusOutlined /> 新增房型</Tag>
              }       
            </TweenOneGroup>
          </Form.Item></Col>        
        </Row>

      </Form>         
    </div>
  )
}

export default forwardRef(Floor)
